<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>1不使用模板</title>
    <!--weui.css仅为快速的做出页面，可删除-->
    <link href="static/weui.css" rel="stylesheet">
    <script src="static/zepto.min.js"></script>
</head>

<body>

<div class="weui-panel weui-panel-access">
    <div class="weui-panel__hd">文章列表</div>
    <div class="weui-panel__bd js-blog-list">

    </div>
</div>

<script type="text/javascript">
    $(function(){
        $.ajax({
            url: 'static/blog.json',
            type: 'get',
            dataType: 'json',
            success: function (response) {
                var htmlList = '';
                var data = response.list;

                $.each(data, function(i,el) {

                    htmlList +='<div class="weui-media-box">'+
                        '<a href="'+ el.url +'" target="_blank"><h4 class="weui-media-box__title">'+ el.title +'</h4></a>'+
                        '<p class="weui-media-box__desc">'+ el.desc +'</p>'+
                        '</div>';
                });

                $('.js-blog-list').empty().append(htmlList);
            },
            error: function (jqXHR, textStatus, errorThrown) {

                if (textStatus == 'timeout') {
                    alert('请求超时');
                    return false;
                }
                console.log(jqXHR.responseText);
            }
        });
    });
</script>
</body>